<template>
  <view class="energy-indicator">
    <view class="energy-container">
      <image class="energy-icon" src="/static/icons/dice.png" mode="aspectFit" />
      <text class="energy-value">{{ energy }}</text>
    </view>
    <view v-if="showRefreshHint" class="energy-hint">
      <text>{{ energyNeeded }}点能量可刷新运势</text>
    </view>
  </view>
</template>

<script>
import { getEnergy } from '../utils/achievements.js'

export default {
  name: 'EnergyIndicator',
  props: {
    showRefreshHint: {
      type: Boolean,
      default: true
    },
    energyNeeded: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      energy: 0
    }
  },
  created() {
    this.loadEnergy()
    
    // 监听能量变化事件
    uni.$on('energy-changed', this.loadEnergy)
  },
  beforeDestroy() {
    // 移除事件监听
    uni.$off('energy-changed', this.loadEnergy)
  },
  methods: {
    loadEnergy() {
      this.energy = getEnergy()
    }
  }
}
</script>

<style lang="scss">
.energy-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .energy-container {
    display: flex;
    align-items: center;
    background-color: #fff3e0;
    border-radius: 20px;
    padding: 6px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    .energy-icon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
    
    .energy-value {
      font-size: 16px;
      font-weight: bold;
      color: #ff9800;
    }
  }
  
  .energy-hint {
    margin-top: 5px;
    
    text {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>